<script>
import {getConsultant} from "@/api/tool/scheduling/funScheduling";
import {getScheduling} from "@/api/tool/scheduling/scheduling";
import moment from "moment";
import {servereducible} from "@/api/tool/scheduling/Schedules";

export default ({
  name: "setEvaluation",
  data() {
    return {
      formInline: {
        region: ''
      },
      label: '',
      consultantList: [],
      //   日历不可约
      query: {
        date: '',
        teacherId: "1639442734806773762",
      },
      list: [],
      tableData: [],
      arr: [],
      classA: 'classA',
      classB: 'classB',
      classC: 'classC',
      //   右侧复选框
      checkedapprove:false,
      checkednot:false,
      btnGroup:false,
      flagState:false,
      status:'',
      ids:'',


    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');

    },
    getTimeList() {
      getScheduling(this.query).then(res => {
        console.log(res)
        // 时间段
        this.arr = res.rows
        this.list = res.data
        this.list.forEach(item => {
          this.tableData.push(item.date)
        })

      })
    },
    //   不可约渲染
    irreducible(date) {
      console.log(date)
      // this.query.date = moment(new Date()).format('YYYY-MM-DD');
      this.query.date = moment(date).format('YYYY-MM-DD');
      this.getTimeList()

    },
    //   左侧改变可约，不可约
    changereducible(data) {
      this.list.forEach(item => {
        // if (item.date == data.day) {
        //   data.status = item.status
        // }
        console.log(item)
      })
      if (data.status) {
        return 'irreducible'
      } else {
        return 'irreduciblePlus'
      }
    },
    //   可约按钮
    styleChange(status) {
      switch (status) {
        case '0':
          return
      }
    },
    //可约按钮
    reducibleBtn() {
      this.checkednot = true
      this.btnGroup = true
      this.checkedapprove = false

    },
    // 休息按钮
    restBtn(){
      this.btnGroup = true
      this.checkedapprove = true
      this.checkednot = false
    },



    // 取消按钮
    cancell(){
      this.checkednot = false
      this.btnGroup = false
    },
    // 保存按钮
    save(){
      this.checkednot = false
      this.btnGroup = false
    },
    //右击可约盒子-----右击可约
    reducibleRight(id,index,status){
      event.preventDefault()
      this.flagState = true
      console.log('右击可约盒子')
      console.log(this.flagState)
      this.status = status
      this.ids = id
    },
    irreducibleRight(){
      event.preventDefault()
      console.log('右击休息盒子')
      this.flagState = true

    },
    //   左击关闭状态管理盒子
    close() {
      this.flagState = false
    },
    //   状态变更
    changeStatus(){
      if (this.status === '2') {
        this.status = '0'
        servereducible({
          ids: this.ids,
          status: this.status
        }).then(res => {
          console.log(res)
          this.$message.success('修改成功')
          this.getTimeList()
        })
      } else {
        this.status = '2'
        // console.log(this.status)
        servereducible({
          ids: this.ids,
          status: this.status
        }).then(res => {
          console.log(res)
          this.$message.success('修改成功')
          this.getTimeList()
        })
      }
      this.flagState = false

    },

  },
  created() {
    // 老师列表渲染
    getConsultant().then(res => {
      this.consultantList = res.rows
    })
    // 不可约左侧渲染
    this.irreducible()
    //


  },

})
</script>

<template>
  <div id="box">
    <!--  顶部咨询老师    -->
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="当前咨询师">
          <el-select v-model="formInline.region" placeholder="全部" class="el-select">
            <el-option v-for="item in this.consultantList" :key="item.id" :label="item.name" value="zhang"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!--  主体区域       -->
    <div class="mainBox">
      <div class="dateLeft">
        <el-calendar>
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template
            slot="dateCell"
            slot-scope="{date, data}">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(2).join('-') }}
            </p>
            <div :class="changereducible(data)" ref="reducible" v-if="tableData.includes(data.day)"
                 @click="irreducible(data.day)">

            </div>
          </template>
        </el-calendar>
      </div>
      <div class="dateRight">
        <div class="rightTop">
          <b>详细情况</b>
        </div>
        <div class="rightContent">
          <el-row class="el-btn">
            <el-button  @click="reducibleBtn">可约</el-button>
            <el-button  @click="restBtn">休息</el-button>
          </el-row>
        </div>
        <!--        item.status  0：可约classB   1：已约classC   2：休息classA    -->
<!--        <div class="time-list" >-->
<!--          <div v-for="(item,index) in arr" :class="classB" :style="item.status=='0'?{display:'inline-block'}:{display: 'none'}" v-on:contextmenu="reducibleRight(item.id,index,item.status)" @click="close">-->
<!--            <span :class="classB">可约</span>-->
<!--            <span style="display: inline-block;margin: auto">{{ item.startTime }} - {{ item.endTime }}</span>-->
<!--            <el-checkbox  v-if="checkedapprove"></el-checkbox>-->
<!--          </div>-->
<!--          <div v-for="item in arr" :class="classC" :style="item.status=='1'?{display:'inline-block'}:{display: 'none'}">-->
<!--            <span :class="classC">已约</span>-->
<!--            <span style="display: inline-block;margin: auto">{{ item.startTime }} - {{ item.endTime }}</span>-->
<!--          </div>-->
<!--          <div v-for="item in arr" :class="classA" :style="item.status=='2'?{display:'inline-block'}:{display: 'none'}" v-on:contextmenu="irreducibleRight(item.id,item.status)" @click="close">-->
<!--            <span :class="classA">休息</span>-->
<!--            <span style="display: inline-block;margin: auto">{{ item.startTime }} - {{ item.endTime }}</span>-->
<!--            <el-checkbox  v-if="checkednot"></el-checkbox>-->
<!--          </div>-->
<!--          &lt;!&ndash;    状态变更     &ndash;&gt;-->
<!--          <div class="changeMenu" v-if="flagState" >-->
<!--            <div class="changeState" @click="changeStatus">状态变更</div>-->
<!--            <div class="changeState" >预约学生</div>-->
<!--          </div>-->

<!--        </div>-->

        <!--        保存，取消按钮           -->
        <div class="btnGroup"  v-if="btnGroup">
          <el-button  @click="cancell">取消</el-button>
          <el-button  type="primary"   @click="save">保存</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
#box {
  padding: 30px 15px;
}
//右侧按钮  保存取消
.btnGroup {
  text-align: center;
}
//右击显示盒子
.changeMenu {
  padding: 20px 0;
  z-index: 999;
  background-color: #fff;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #e6ebf5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  font-size: 14px;
  top: 20px;
  left: 20px;
  position: relative;
  width: 200px;


  .changeState {
    padding: 5px 15px;
    text-align: center;
    box-sizing: border-box;
    line-height: normal;
  }

}
//复选框
.checkBox {
  ::v-deep .el-checkbox__label {
    display: none;
  }
}
::v-deep .el-checkbox {
  position: relative;
  top: -25px;
  left: -95px;
}
//日历
.is-selected {
  color: black;
}

.el-select {
  width: 100%;
}

.irreducible {
  color: #23a500;
}

.irreducible::after {
  content: '可约';
}

.irreduciblePlus {
  color: #ff4949;
}

.irreduciblePlus::after {
  content: '不可约';
}

.mainBox {
  overflow: hidden;
  width: 98%;
  height: 600px;

  .dateLeft {
    float: left;
    width: 55%;
  }

  .dateRight {
    float: right;
    width: 41%;
    height: 600px;

    .rightTop {
      height: 9%;
      line-height: 50px;
      padding-left: 17px;
      border-bottom: 1px solid #cccccc;
    }

    .el-btn {
      margin-top: 20px;
      margin-left: 20px;
    }

  }
}

.time-list {
  padding: 20px;
  overflow: hidden;

  .classA {
    float: left;
    margin: 5px;
    width: 144px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    position: relative;
    border-radius: 4px;
    background-color: #f7e9c4;

    .classA:first-child {
      width: 35.6px;
      font-size: 12px;
      height: 19px;
      padding: 0 5px;
      line-height: 19px;
      text-align: center;
      background-color: #ffba00;
      border-color: #ffba00;
      color: #fff;
      position: absolute;
      top: 5px;
      right: 5px;
      border-radius: 4px;
    }
  }

}

.classB {
  float: left;
  margin: 5px;
  width: 144px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  position: relative;
  border-radius: 4px;
  background-color: #e9ffe4;

  .classB:first-child {
    width: 35.6px;
    height: 19px;
    font-size: 12px;
    padding: 0 5px;
    line-height: 19px;
    text-align: center;
    background-color: #13ce66;
    border-color: #13ce66;
    color: #fff;
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 4px;
  }
}

.classC {
  float: left;
  margin: 5px;
  width: 144px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  position: relative;
  border-radius: 4px;
  background-color: #ffe8e8;

  .classC:first-child {
    width: 35.6px;
    height: 19px;
    font-size: 12px;
    padding: 0 5px;
    line-height: 19px;
    text-align: center;
    background-color: #ff4949;
    border-color: #ff4949;
    color: #fff;
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 4px;
  }
}
</style>
